import { useEffect, useState } from "react";
import { Checkbox, Input, TextArea,Toast } from "antd-mobile";
import { useNavigate, useSearchParams } from "react-router-dom";
import Styles from "./index.module.less";
import { getPurposeInfo,editDetailInfo } from '@/service/projectDetail'
import departmentData from '@/assets/ts/department'

const Index: React.FC<any> = () => {
    const [search] = useSearchParams();
    const searchId = search?.get('id')
    const navigate = useNavigate();
    const [ params, setParams ] = useState({
        projectName:'',
        companyName:'',
        turnDept:[],
        planInvestVolume:'',
        settledAppeal:'',
    });
    const changeParams = (val:any,key:string)=>{
        setParams((value:any)=>{
            value[key] = val
            return {...value}
        })
    }
    const getPurposeData = async() => {
        const res:any = await getPurposeInfo({id: searchId})
        const { code, data } = res?.data
        if(code == 0) {
            let {projectName,companyName,turnDept,planInvestVolume,settledAppeal} = data;
            let haveturnDept = false
            for(let i = 0;i<departmentData.length;i++){
                let item = departmentData[i]
                if(turnDept && turnDept.split(',').indexOf(item.value)!=-1){
                    haveturnDept = true
                    break
                }
            }
            setParams((value:any)=>{
                value.projectName = projectName
                value.companyName = companyName
                value.turnDept = turnDept && haveturnDept?turnDept.split(','):[]
                value.planInvestVolume = planInvestVolume
                value.settledAppeal = settledAppeal
                return {...value}
            })
        }
    }
    const submit = async()=>{
        const verify = [
            [params.companyName === '','企业（项目投资方）不能为空'],
            [params.turnDept.length === 0,'请选择责任单位'],
            [params.planInvestVolume === '','意向投资额不能为空'],
            [params.settledAppeal === '','落户诉求不能为空'],
        ]
        for(let i = 0;i<verify.length;i++){
            if(verify[i][0]){
                return Toast.show({content:verify[i][1]})
            }
        }
        const res:any = await editDetailInfo({
            id: searchId,
            projectName:params.projectName,
            companyName:params.companyName,
            turnDept:params.turnDept.toString(),
            planInvestVolume:params.planInvestVolume,
            settledAppeal:params.settledAppeal,
        })
        const { code,msg } = res?.data
        if(code == 0) {
            navigate(`/project-detail?id=${searchId}`);
        }else{
            Toast.show({content:msg})
        }
    }
    useEffect(()=>{
        getPurposeData()
    },[])
    return(<>
    <div className={Styles.Baseinfo}>
        <div className={Styles.BaseinfoTitle}>基本信息</div>
        <div className={Styles.BaseinfoBlock}>
            <div className={Styles.BaseinfoItem}>
                <div className={Styles.BaseinfoKey}>企业（项目投资方）：</div>
                <div className={Styles.BaseinfoInput}>
                    <Input
                        placeholder='请输入'
                        value={params.companyName}
                        onChange={val => {
                            changeParams(val,'companyName')
                        }}
                    />
                </div>
            </div>
            <div className={Styles.BaseinfoItem}>
                <div className={Styles.BaseinfoKey}>责任单位：</div>
                <div className={Styles.BaseinfoInput}>
                    <Checkbox.Group value={params.turnDept} onChange={val => {changeParams(val,'turnDept')}}>
                        {departmentData.map((item:any,index:any)=>{
                            return <div className={Styles.CheckboxItem} key={index}>
                            <Checkbox value={item.value}></Checkbox>{item.label}
                        </div>
                        })}
                    </Checkbox.Group>
                </div>
            </div>
            <div className={Styles.BaseinfoItem}>
                <div className={Styles.BaseinfoKey}>意向投资额：</div>
                <div className={Styles.BaseinfoInput}>
                    <Input
                        placeholder='请输入'
                        value={params.planInvestVolume}
                        onChange={val => {
                            changeParams(val,'planInvestVolume')
                        }}
                    />
                </div>
            </div>
            <div className={Styles.BaseinfoItem}>
                <div className={Styles.BaseinfoKey}>落户诉求：</div>
                <div className={Styles.BaseinfoInput}>
                    <TextArea
                        placeholder='请输入'
                        value={params.settledAppeal}
                        onChange={val => {
                            changeParams(val,'settledAppeal')
                        }}
                    />
                </div>
            </div>
        </div>
        <div className={Styles.submitBtn}>
            <div className={Styles.btnCancel} onClick={()=>navigate(`/project-detail?id=${searchId}`)}>取消</div>
            <div className={Styles.btnEnter} onClick={()=>submit()}>确认</div>
        </div>
    </div>
    </>)
}
export default Index;